<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" class="head-back">
      <p>代客下单</p>
      <span></span>
    </div>
    <div class="substitute-search-box">
      <div class="substitute-search">
        <input type="text" placeholder="请输入客户手机号">
        <img :src="'searchIcon.png' | imagePath" />
      </div>
    </div>
    <div class="substitute-list">
      <div class="substitute-item">
        <img :src="'img2.png' | imagePath" />
        <p>醉里挑灯</p>
        <button @click="isSuccess = !isSuccess">去下单</button>
      </div>
    </div>
    <div class="substitute-noData" v-if="false">
      <img :src="'searchNodata.png' | imagePath" />
      <p>没有搜索到该用户</p>
    </div>
    <div class="upBox" v-if="isSuccess">
      <div class="substitute-success">
        <h1>已为客户下单成功!</h1>
        <img :src="'successIcon.png' | imagePath" />
        <div class="substitute-success-btn">
          <button @click="$.router.push('home')">返回首页</button>
          <button class="active" @click="isSuccess = !isSuccess">查看订单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        isSuccess:false
      }
    }
  }
</script>
<style>
  .substitute-search-box{
    background-color: #FFFFFF;
    padding:0.34rem 0.4rem;
  }
  .substitute-search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #E5E5E5;
    border-radius: 0.1rem;
    padding: 0 0.4rem;
    height: 0.9rem;
  }
  .substitute-search img{
    width: 0.38rem;
    height: 0.37rem;
  }
  .substitute-item{
    margin-top: 0.26rem;
    background-color: #FFFFFF;
    padding: 0 0.4rem;
    height: 2rem;
    display: flex;
    align-items: center;
  }
  .substitute-item img{
    width: 1.17rem;
    height: 1.17rem;
    margin-right: 0.4rem;
  }
  .substitute-item p{
    font-size: 0.38rem;
    color: #343434;
    flex: 1;
  }
  .substitute-item button{
    color: #FFFFFF;
    font-size: 0.38rem;
    font-weight: 400;
    border-radius: 0.53rem;
    width: 2.13rem;
    padding: 0.15rem 0;
    background-color:#6EC6C6 ;
  }
  .substitute-noData img{
    display: block;
      width: 3.04rem;
      height: 3.04rem;
      margin:1.33rem auto 0.66rem;
  }
  .substitute-noData p{
    color: #9A9A9A;
    font-size: 0.32rem;
    text-align: center;
  }
  .substitute-success{
    background-color: #FFFFFF;
    width: 7.46rem;
    height: 6.6rem;
    border-radius: 0.2rem;
  }
  .substitute-success h1{
    font-size: 0.53rem;
    margin: 0.66rem 0;
    text-align: center;
    font-weight: 400;
    color: #030000;
  }
  .substitute-success img{
    display: block;
    width: 3.1rem;
    height: 1.76rem;
    margin: auto;
  }
  .substitute-success-btn{
    display: flex;
    padding: 0 0.82rem;
    justify-content: space-between;
  }
  .substitute-success-btn button{
    border: 1px solid #6EC6C6;
    color: #6EC6C6;
    font-size: 0.38rem;
    font-weight: 400;
    background-color: #FFFFFF;
    width: 2.77rem;
    padding: 0.16rem 0;
    margin-top: 1.06rem;
    border-radius:0.54rem ;
  }
  .substitute-success-btn button.active{
    background-color: #6EC5C6;
    color: #FFFFFF;
  }
</style>
